<template>
	<div id="container">
		<header>
			<van-nav-bar
			  title="抵用券详情"
			  left-text="返回"
			  right-text="抢券"
			  left-arrow
			  @click-left="onClickLeft" 
			/>
		</header>
		<div id="content">
			<!-- coupon-show -->
			<div class="coupon-show">
				 <h2>可用券</h2>
				 <h1>0</h1>
				 <h3>什么是抵用券？</h3>
			</div>
			<!-- coupon-change -->
			<div class="coupon-change">
				<div class="coupon-cha1">
					<input type="text" placeholder="请输入代码兑换抵用券">
					<van-button type="danger">确认兑换</van-button>
				</div>
				<div class="coupon-cha2">
					<van-button type="default">可使用</van-button>
					<van-button type="default">未开始</van-button>
					<van-button type="default">已使用</van-button>
					<van-button type="default">已过期</van-button>
				</div>
			</div>
			<!-- coupon-item -->
				<div class="coupon-item">
					<van-icon name="coupon-o" />
					<h3>怎么可以没有积分</h3>
					<h4>下单就能赚</h4>
				</div>
	
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'Coupon',
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	h1,h2,h3{
		padding: 0;
		margin: 0;
	}
	#container{
		height: 100vh;
		background: #f3f3f3;
	}
	/* --------------------coupon-header----------------- */
	header .van-nav-bar{
		height:47px;
		background: #f65050;
	}
	header .van-nav-bar__title{
		font-size:18px;
		font-weight:600;
		font-family:"楷体";
		color:#fefafb;
	}
	.van-nav-bar__text,.van-nav-bar__arrow{
		color:#fefafb;
		font-size:16px;
	}
	header .van-nav-bar__text{
		font-family: "楷体";
		font-weight:500;
	}
	/* -------------------coupon-content-show------------ */
	.coupon-show{
		height: 138px;
		background:#f65050;
		overflow: hidden;
	}
	.coupon-show h2,h1,h3{
		color: #ffffff;
		font-weight: 500;
		font-family: "楷体";
	}
	.coupon-show h2{
		margin: 17px 0px 28px 42px;
		font-size: 15px;
	}
	.coupon-show h1{
		margin: 0px 0px 19px 42px;
		font-size:30px;
	}
	.coupon-show h3{
		margin-left:270px;
		font-size: 13px;
	}
	/* -------------------coupon-change--------------- */
	.coupon-cha1{
		height:73px;
		background:#fafafa;
		margin-bottom: 10px;
	}
	.coupon-cha1 input{
		border: 0;
		background:#fafafa;
		border-bottom: 1px solid #e9e9e9;
		font-family: "楷体";
		font-size:15px;
		color: #919191;
		width:250px;
		height:25px;
		margin-left:17px;
		margin-top:26px;
		margin-right: 10px;
	}
	.coupon-cha1 button{
		height: 34px;
		width: 84px;
		border-radius:5px;
		font-size: 12px;
		line-height: 34px;
	}
	.coupon-cha2{
		height: 79px;
		background: #fff;
		padding-top: 16px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
	}
	.coupon-cha2 button{
		border: 1px solid #bebebe;
	}
	/* -------------------coupon-tab----------------- */
	.coupon-item {
		text-align: center;
	}
	.coupon-item .van-icon-coupon-o{
		font-size: 150px;
		color: #c0c4c7;
		margin-top:50px;
	}
	.coupon-item h3{
		font-family: "楷体";
		font-size: 20px;
		color: #2b2b2b;
		font-weight: 600;
	}
	.coupon-item h4{
		font-family: "楷体";
		font-size: 15px;
		color: #989898;
	}
</style>
